<template>
  <div>
    {{count}}
    <x-button @click.native="testStates">vuex测试</x-button>
    <x-button @click.native="add">mapMutations方式</x-button>
    <x-button @click.native="action">vuex_action</x-button>
  </div>
</template>

<script>
  import XButton from "vux/src/components/x-button/index";
  import {mapMutations} from 'vuex'

  export default {
    name: "vuexTest",
    computed: {
      count() {
        return this.$store.state.count
      }
    },
    methods: {
      //调用时可以直接 @click.native="increment"
      ...mapMutations([
        'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

        // `mapMutations` 也支持载荷：
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
      ]),

      //调用时可以直接 @click.native="add"
      ...mapMutations({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
      }),

      testStates() {
        this.$store.commit('increment')
        console.log(this.$store.state.count)
        console.log(JSON.stringify(this.$store.getters.doneTodos))
        console.log(JSON.stringify(this.$store.getters.getTodoById(2)))

      },
      action() {
        this.$store.dispatch('incrementAsync').then(function (res) {
          alert("异步操作vuex完成" + res)
        })
      }
    },
    components: {XButton}
  }
</script>

<style scoped>

</style>
